<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>普通选项卡</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			div{
				width: 300px;
				height: 300px;
				/*border: 1px solid blue;*/
			}
			input{
				width: 100px;
				float: left;
				height: 30px;
				border: 1px solid red;
				
			}
			.tab{background: red;
			    color: green;
			}
			li{
				width: 300px;
				height: 270px;
				background: blue;
				font-size:100px;
				text-align: center;
				line-height: 270px;
				color: red;
				display: none;
			}
			.lis{
				display: block;
			}
			section{overflow: hidden;}
		</style>
	</head>
	<body>
		<div class="xxk">
			<section class="box">
				<input type="button" value="选项卡1" class="tab" />
				<input type="button" value="选项卡2" />
				<input type="button" value="选项卡3" />
			</section>
			
			<ul>
				<li class="lis">我</li>
				<li>爱</li>
				<li>你</li>
			</ul>
		</div>
		
	</body>
	
	<script>
		var btnlist = document.querySelectorAll('.box input');
		var lilist=document.querySelectorAll('.xxk li');
		for(let i=0;i<btnlist.length;i++){
			btnlist[i].onclick=function(){
				for(var j=0;j<lilist.length;j++)
				{
					btnlist[j].className='';
					lilist[j].className='';
					
				}
				lilist[i].className='lis';
				this.className='tab'
			}
		}
	</script>
</html>
